<template>
  <div class="tabs">
    <ul class="tabs__links">
      <li v-for="(item, index) in 4" @click="chooseIndex = index" :key="'colorfulTabs'+index">
        <button class="tabs__link" :class="{'active': chooseIndex === index}">
          <span class="tabs__link__text" data-text="Tab 1">Tab {{index + 1}}</span>
        </button>
      </li>
    </ul>
    <ul class="tabs__contents">
      <li v-for="(item, index) in 4" :key="'colorfulTabsss'+index">
        <div class="tabs__content" :class="{'active': chooseIndex === index}">
          45646Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Habitasse platea
          dictumst quisque sagittis purus sit amet volutpat consequat. Felis eget
          nunc lobortis mattis aliquam faucibus purus in.
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "ColorfulTabs",
  data() {
    return{
      chooseIndex: 0
    }
  },
  methods: {
    ceshi() {
      console.log(123);
    }
  }
}
</script>
<style lang="scss" scoped>
$tab-links-height: 80px;
$tab-links-bg: linear-gradient(135deg, #e5eaf1 0%, #b9c5d8 100%);
$tab-links-overlay: linear-gradient(
    135deg,
    #2cd8d5 0%,
    #6b8dd6 48%,
    #8e37d7 100%
);
$tab-link-bg: linear-gradient(
    90deg,
    transparent 70%,
    rgba(255, 255, 255, 0.2) 100%
);

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1A1E23;
}

.tabs {
  width: 100%;
  max-width: 600px;
  min-width: 300px;
  font-family: Lato, sans-serif;
  color: #333;

  .tabs__links {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: $tab-links-height;
    background: $tab-links-bg;
    list-style-type: none;

    li {
      flex: 1;

      .tabs__link {
        all: unset;
        position: relative;
        height: $tab-links-height;
        width: 100%;
        background: $tab-link-bg;
        cursor: pointer;
        overflow: hidden;
        transition: 0.3s;

        // overlay
        &::before {
          position: absolute;
          content: "";
          top: 0;
          left: 0;
          z-index: 2;
          width: 100%;
          height: 100%;
          background: $tab-links-overlay;
          transform: scaleY(0);
          transform-origin: top;
          transition: 0.3s ease-in-out;
        }

        .tabs__link__text {
          position: relative;
          z-index: 2;
          display: flex;
          justify-content: center;
          align-items: center;
          opacity: 0.6;
          transition: 0.5s;

          // big-text
          &::before {
            position: absolute;
            content: attr(data-text);
            top: 160%;
            z-index: -1;
            font-size: 40px;
            font-weight: 600;
            color: white;
            opacity: 0.1;
            transition: 1.2s ease-out;
          }
        }

        &:hover {
          &::before {
            transform: scaleY(1);
          }

          .tabs__link__text {
            color: white;
            opacity: 1;

            &::before {
              transform: translateY(-300%);
            }
          }
        }

        &.active {
          transform: scaleY(1.4);
          background: white;

          &::before {
            transform: scaleY(0.05);
          }

          .tabs__link__text {
            transform: scaleY(0.714);
          }
        }

        &.active .tabs__link__text,
        &.active:hover .tabs__link__text {
          background: $tab-links-overlay;
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent;
          opacity: 1;
        }
      }
    }
  }

  .tabs__contents {
    position: relative;
    margin-top: 0;
    padding: 40px 60px;
    background: white;
    list-style-type: none;
    transition: 1s;

    // bottom-line
    &::after {
      position: absolute;
      content: "";
      left: 0;
      bottom: 0;
      width: 100%;
      height: 5px;
      background: $tab-links-overlay;
    }

    .tabs__content {
      display: none;
      min-height: 200px;
      font-weight: 300;
      line-height: 1.8;
      opacity: 0;
      transform: translateY(30%);
      animation: fadeIn 0.6s forwards;

      &.active {
        display: block;
      }
    }
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>